<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 + TypeScript 项目结构</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            padding: 20px;
        }

        .directory, .file {
            margin-left: 20px;
            position: relative;
        }

        .directory::before, .file::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 3px;
        }

        .directory::before {
            background: url('data:image/svg+xml;utf8,<svg fill="%23000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H8l-1-1h-5.5z"/></svg>') no-repeat center;
        }

        .file::before {
            background: url('data:image/svg+xml;utf8,<svg fill="%23000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.293 3H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5.707l-4-4z"/><path d="M9 2v2a1 1 0 0 0 1 1h2l-3-3z"/></svg>') no-repeat center;
        }
    </style>
</head>
<body>
    <h1>Vue 3 + TypeScript 项目结构</h1>
    <div class="directory">
        <strong>src</strong> - 项目源代码
        <div class="directory">
            <strong>assets</strong> - 静态资源 (例如：样式、图片)
        </div>
        <div class="directory">
            <strong>components</strong> - Vue 组件 (可重用的 UI 部分)
        </div>
        <div class="directory">
            <strong>directives</strong> - 自定义指令 (扩展 HTML 标签的功能)
            <div class="file">myDirective.ts - 示例自定义指令文件</div>
        </div>
        <div class="directory">
            <strong>views</strong> - 页面视图 (应用中的页面)
            <div class="file">HomePage.vue - 示例页面文件</div>
        </div>
        <div class="directory">
            <strong>router</strong> - 路由配置 (管理页面导航)
            <div class="file">index.ts - 路由配置文件</div>
        </div>
        <div class="directory">
            <strong>store</strong> - Vuex 状态管理 (管理应用状态)
            <div class="file">index.ts - Vuex 主文件</div>
        </div>
        <div class="directory">
            <strong>utils</strong> - 工具函数 (共用的帮助函数)
            <div class="file">util.ts - 示例工具函数文件</div>
        </div>
        <div class="directory">
            <strong>types</strong> - TypeScript 类型定义 (自定义类型声明)
        </div>
        <div class="directory">
            <strong>services</strong> - 服务 (处理 API 请求等)
        </div>
        <div class="directory">
            <strong>plugins</strong> - 插件 (Vue 插件或其他库)
        </div>
        <div class="directory">
            <strong>mixins</strong> - 混入 (复用 Vue 组件的选项和逻辑)
        </div>
        <div class="file">App.vue - 根组件文件</div>
        <div class="file">main.ts - 入口文件</div>
        <div class="file">shims-vue.d.ts - Vue 文件的 TypeScript 支持文件</div>
    </div>
    <div class="directory">
        <strong>public</strong> - 公共文件 (不会被 Webpack 处理)
        <div class="file">index.html - 主 HTML 文件</div>
    </div>
    <div class="file">.env - 环境变量配置文件</div>
    <div class="file">package.json - 项目依赖和配置</div>
    <div class="file">tsconfig.json - TypeScript 配置文件</div>
    <div class="file">vue.config.js - Vue CLI 配置文件</div>
</body>
</html>
